<template>
  <span
    :class="[
      { right: msg == '正确' },
      { error: msg == '错误' },
      { undo: msg == '未完成' },
    ]"
    >{{ index }}: {{ msg }}</span
  >
</template>

<script>
export default {
  props: ["index"],
  created() {
    this.$bus.$on(`sub${this.index}`, (flag) => (this.msg = flag));
  },
  data() {
    return {
      msg: "未完成",
    };
  },
};
</script>

<style scoped>
.right {
  color: green;
}
.error {
  color: red;
}
.undo {
  color: #ccc;
}
</style>